<!DOCTYPE html>
<html lang="en">
  <head>
    <title>dm Autoupdate</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/app.css" rel="stylesheet">
  </head>
  <body>
    <div class="center container">
      <br>
      <br>
      <div id="percentage"></div>
      <div id="message">Downloading application update<span id="visual">....</span></div>
    </div>

    <script type="text/javascript">
      const ipcRenderer = require('electron').ipcRenderer;

      ipcRenderer.on('download-progress', (evt, data) => {
        document.querySelector('#percentage').innerText = `${data.percent} %`
      });

      ipcRenderer.on('error', (evt, message) => {
        document.querySelector('#percentage').innerText = '';
        document.querySelector('#message').innerText = message;
      });

      setInterval(() => {
        let visual = document.querySelector('#visual');
        visual.innerText =  visual.innerText == '....' ? '..' : '....';
      }, 2000);
    </script>
  </body>
</html>
